<template>
  <!-- 整体上下布局 -->
  <div class="h-screen flex flex-col">
    <!-- 顶部 Tab 栏 -->
    <div class="flex-none border-b border-gray-200">
      <div class="flex text-14px">
        <button
          class="px-20px py-12px cursor-pointer"
          :class="
            activeTab === 'object'
              ? 'text-blue-600 border-b-2 border-blue-600'
              : 'text-gray-600 hover:text-blue-500'
          "
          @click="activeTab = 'object'"
        >
          对象列表
        </button>
        <button
          class="px-20px py-12px cursor-pointer"
          :class="
            activeTab === 'field'
              ? 'text-blue-600 border-b-2 border-blue-600'
              : 'text-gray-600 hover:text-blue-500'
          "
          @click="activeTab = 'field'"
        >
          对象字段
        </button>
      </div>
    </div>

    <!-- 下方内容区 -->
    <div class="flex-1 overflow-hidden">
      <!-- 对象列表 -->
      <div v-show="activeTab === 'object'" class="h-full p-20px overflow-auto">
        <ObjectComponent
          :selected-id="selectedId"
          @cell-click="handleMasterCellClick"
          @selection-change="handleMasterSelectionChange"
        />
      </div>

      <!-- 对象字段 -->
      <div v-show="activeTab === 'field'" class="h-full p-20px overflow-auto">
        <ObjectFieldComponent :parent-id="selectedId" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import ObjectComponent from './object.vue'
import ObjectFieldComponent from './objectField.vue'
import { ref, watch } from 'vue'

/* ---------- Tab 切换 ---------- */
const activeTab = ref<'object' | 'field'>('object')

/* ---------- 选中对象 ---------- */
const selectedId = ref<string | null>(null)

const handleMasterSelectionChange = (selection: any[]) => {
  selectedId.value = selection.length === 1 ? selection[0].id : null
}
const handleMasterCellClick = (row: any) => (selectedId.value = row?.id ?? null)

watch(selectedId, (n, o) => console.log('selectedId changed', o, '→', n))
</script>
